<template>
  <div>
    <el-dialog  v-model="show" title="添加设备" width="970" align-center>
      <div class="btn">
        <el-button  class="active">零售柜</el-button>
        <el-button>提货柜</el-button>
      </div>
      <el-transfer
        v-model="rightValue"
        style="text-align: left; display: inline-block;height:600px"
        
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['可选设备', '已选设备']"
        :button-texts="['', '']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #left-footer>
          <!-- <div class="search">
            <div class="item">
              <span>设备</span>
              <el-input v-model="searchLeft.name" placeholder="设备名称或编号"/>
            </div>
            <div class="item">
              <span>线路</span>
              <el-input v-model="searchLeft.name" placeholder="请选择线路"/>
            </div>
            <div class="item">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
            </div>
          </div> -->
          <el-form  ref="ruleFormRef"  style="" :inline="true" :model="searchLeft"  label-width="auto"   status-icon>
            <el-form-item label="设备" prop="name" style="width:100%;margin-bottom:10px">
              <el-input v-model="searchLeft.name" placeholder="设备名称或编号"/>
            </el-form-item>
            <el-form-item label="线路" prop="" style="width:100%;margin-bottom:10px">
              <el-input v-model="searchLeft.road" />
            </el-form-item>
            <div style="width:100%;margin-bottom:10px;display: flex;justify-content: flex-end;">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
            </div>
          </el-form>
        </template>
        <template #right-footer>
          <el-form  ref="ruleFormRef"  style="" :inline="true" :model="searchLeft"  label-width="auto"   status-icon>
            <el-form-item label="设备" prop="name" style="width:100%;margin-bottom:10px">
              <el-input v-model="searchLeft.name" placeholder="设备名称或编号"/>
            </el-form-item>
            <el-form-item label="线路" prop="" style="width:100%;margin-bottom:10px">
              <el-input v-model="searchLeft.road" />
            </el-form-item>
            <div style="width:100%;margin-bottom:10px;display: flex;justify-content: flex-end;">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
              <el-button round :icon="RefreshLeft">重置</el-button>
            </div>
          </el-form>
        </template>
        </el-transfer>
      <div class="footer">
        <div class="text">选择已被其他活动方案占用的设备，原始方案将被取消关联</div>
        <div class="df">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { VNode, VNodeProps } from 'vue'
import { CaretBottom, Search, RefreshLeft } from "@element-plus/icons-vue";
const searchLeft = ref({
  name:'',
  road:''
})
const show = ref(true)
interface Option {
  key: number
  label: string
  disabled: boolean
}
const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `大润发3号 ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc = (
  h: (type: string, props: VNodeProps | null, children?: string) => VNode,
  option: Option
) => {
  return h('span', null, option.label)
}
const handleChange = (
  value: number[] | string[],
  direction: 'left' | 'right',
  movedKeys: string[] | number[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style scoped>
.btn{
  margin-bottom: 10px;
}
.active{
  background:#f0a93e !important;
  color: #fff !important;
}
.transfer-footer {
  margin-left: 15px;
  padding: 6px 5px;
}
.footer{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .text{
    color: #0000FF;
    font-size: 12px;
  }
}
.search{
  width: 100%;
  .item{
    width: 100%;
    display: flex;
  }
}
</style>
<style>
.el-transfer{
  width: 900px !important;
}
.el-transfer-panel {
  width: 360px !important;
}
.el-transfer-panel .el-transfer-panel__footer{
  position: absolute;
  top: 40px;
  padding: 10px;
  border-bottom: none;
}
.el-transfer-panel__body{
  padding-top: 140px;
}
.el-transfer-panel{
  height: 540px;
}
.el-transfer-panel__body{
  height: 500px;
}
.el-transfer-panel__list{
  height: 360px;
}
.el-transfer-panel__body.is-with-footer{
  border-bottom: 1px solid var(--el-transfer-border-color);
}
</style>